<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <script src="static/plugins/echarts/echarts.js"></script>
    <style>
        .layui-row {
            background-color: #eee;
        }

        .echarts-content {
            height: 300px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md12">
                <div class="echarts-content" id="line"></div>
            </div>
            <div class="layui-col-md6">
                <div class="echarts-content" id="bar"></div>
            </div>
            <div class="layui-col-md6">
                <div class="echarts-content" id="pie"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        setLineEcharts();
        setBarEcharts();
        setPieEcharts();
    })

    function setLineEcharts() {
        const line = document.getElementById("line");
        const lineEcharts = echarts.init(line);
        $.ajax({
            url: "echarts/line",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const list = res.data;
                    const nameList = list.map(item => item.name)
                    const valueList = list.map(item => item.value)
                    lineEcharts.setOption({
                        title: {
                            text: "每月申请量",
                            left: "center",
                            top: "10",
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        xAxis: {
                            type: 'category',
                            data: nameList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: valueList,
                                type: 'line'
                            }
                        ]
                    })
                }
            }
        })


    }

    function setBarEcharts() {
        const bar = document.getElementById("bar");
        const barEcharts = echarts.init(bar);

        $.ajax({
            url: 'echarts/bar',
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const list = res.data;
                    const nameList = list.map(item => item.name)
                    const valueList = list.map(item => item.value)
                    barEcharts.setOption({
                        title: {
                            text: "部门当月申请量",
                            left: "center",
                            top: "10",
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        xAxis: {
                            type: 'category',
                            data: nameList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: valueList,
                                type: 'bar'
                            }
                        ]
                    })
                }
            }
        })


    }

    function setPieEcharts() {
        const pie = document.getElementById("pie");
        const pieEcharts = echarts.init(pie);

        $.ajax({
            url: "echarts/pie",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    pieEcharts.setOption({
                        title: {
                            text: '车辆借用次数',
                            left: 'center',
                            top: "10"
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '借用次数',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    ...res.data
                                ]
                            }
                        ]
                    })
                }
            }
        })


    }
</script>
</html>
